<!--交往记录列表页  ————————  客户经理可查看-->
<template>
  <div id="CustomerCommunicationRecordList">
    <!--         Breadcrumbs -->
    <div class="breadcrumbs" style="margin: 0px;padding-top: 20px;">
      <ul>
        <li class="home"><a href="index.html" title="Go to Home Page"><strong style="font-size: 18px;">客户管理</strong></a>
          <span>/</span>
        </li>
        <li><strong>客户信息管理</strong><span>/</span></li>
        <li><strong>交往记录列表</strong></li>
      </ul>
    </div>
    <article class="col-main">
      <div class="my-account block block-account" style="padding-left: 20px;padding-right: 20px;">
        <div style="padding: 20px 20px 30px 20px">
          <span style="font-size: 30px;font-weight: bolder">交往记录列表</span>
          <button v-on:click="toCreateCustomerCommunicationRecord" class="btn btn-success" style="float: right;margin-top: 10px">新建交往记录</button>
        </div>
        <div style="margin-bottom: 30px">
          <el-descriptions direction="vertical" :column="2" border>
            <el-descriptions-item label="客户编号">{{ customerId }}</el-descriptions-item>
            <el-descriptions-item label="客户名字">{{customerName}}</el-descriptions-item>
          </el-descriptions>
        </div>
        <table class="table">
          <thead>
          <tr>
            <th>编号</th>
            <th>时间</th>
            <th>地点</th>
            <th>概要</th>
            <th>备注</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item,index) in records">
            <th>{{index+1+(current-1)*10}}</th>
            <td>{{item.recordDate}}</td>
            <td>{{item.recordPlace}}</td>
            <td>{{item.recordOutline}}</td>
            <td>{{item.recordRemarks}}</td>
            <td>
              <button v-on:click="toUpdateCustomerCommunicationRecord(item.recordId)" class="btn btn-primary">编辑</button>
              <button @click="open(item.recordId)" class="btn btn-danger">删除</button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="block text-center">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
        <div class="text-center" style="margin-top: 40px;padding-bottom: 30px">
          <button v-on:click="toCustomerDetailedInfo" class="btn btn-default">返回</button>
        </div>
      </div>
    </article>
  </div>
</template>

<script>
export default {
  name: "CustomerCommunicationRecordList",
  data(){
    return{
      customerId:'',
      customerName:'',
      currentPage: 1,
      limit:10,
      current:1,
      total:0,
      records:[]
    }
  },
  methods:{
    loadCustomer(){
      this.customerId=this.$route.query.customerId,
      this.customerName=this.$route.query.customerName
    },
    toUpdateCustomerCommunicationRecord(recordId){
      this.$router.push({path:'/MemuBar/UpdateCustomerCommunicationRecord',query:{
          customerId:this.customerId,
          customerName:this.customerName,
          recordId:recordId
        }})
    },
    toCustomerDetailedInfo(){
      this.$router.push({path:'/MemuBar/CustomerDetailedInfo',query:{
          customerId:this.customerId,
          customerName:this.customerName
        }})
    },
    toCreateCustomerCommunicationRecord(){
      this.$router.push({path:'/MemuBar/CreateCustomerCommunicationRecord',query:{
          customerId:this.customerId,
          customerName:this.customerName
        }})
    },
    loadRecords(){
    this.$axios.get('/record/loadRecords',{
      params:{
        limit:this.limit,
        current:this.current,
        customerId:this.customerId
      }
    }).then(
      res=>{
        this.records=res.data.data.myData
      }
    )
    },
    handleSizeChange(val) {
      this.limit = val;
      this.loadRecords()
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadRecords()
    },
    open(recordId) {
      this.$confirm('此操作将永久删除这条交往记录 , 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$axios.delete("/record/deleteRecordByRecordId",{
          params:{
            recordId:recordId
          }
        }).then(
          res=>{
            this.$message({
              type: 'success',
              message: res.data.message
            });
            this.$router.go(0);
          }
        )
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  created() {
    this.loadCustomer()
    this.loadRecords()
  }
}
</script>

<style scoped>
</style>
